<template>
  <el-container>
    <!-- 查询栏 -->
    <div
      style="background-color: #fff; margin: 10px 0 ;box-shadow: 10px 10px 18px 0 rgba(0,0,0,.12);border-radius:3px;width:100%;"
      class="article">
      <el-row style="margin: 1% auto;font-size:20px;text-align: center;">文章管理</el-row>
      <el-form :model="formData" ref="formData" :inline="true" style="margin: 1% auto; text-align:center">
        <el-row>
          <el-form-item label="文章类型" prop="articleType">
            <el-select placeholder="请选择" v-model="formData.articleType">
              <el-option label="新闻动态展示" value="1"></el-option>
              <el-option label="政策法规" value="2"></el-option>
              <el-option label="通知通告" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间" prop="createTime">
            <el-date-picker v-model="formData.createTime" type="daterange" align="right" unlink-panels
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
              @change="selectLikeTime">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="标题" prop="name">
            <el-input placeholder="请输入标题" v-model="formData.name">
              <el-select v-model="formData.state" slot="prepend" style="width:120px">
                <el-option label="全部" value="1"></el-option>
                <el-option label="未显示" value="0"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('formData')">搜索</el-button>
            <el-button @click="resetForm('formData')">重置</el-button>
          </el-form-item>
        </el-row>

      </el-form>
    </div>
    <!-- 表格 -->
    <el-card style="margin-top:10px">
      <span>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="openAticleDialog">添加文章</el-button>
      </span>
      <el-main>
        <el-table style="width: 100%" :data="tableData.data">
          <el-table-column prop="articleType" label="文章类型" align="center" :formatter="articleTypeFormart">
          </el-table-column>
          <el-table-column prop="name" label="标题" align="center"></el-table-column>
          <el-table-column prop="createTime" label="发布时间" align="center" :formatter="timeFormart"></el-table-column>
          <el-table-column prop="updateTime" label="最后修改日期" align="center"></el-table-column>
          <el-table-column prop="state" label="显示状态" align="center" :formatter="stateFormart"></el-table-column>
          <el-table-column prop="releaseAccount" label="发布用户账号" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button slot="reference" size="mini" @click="editNewsInfo(scope.$index, scope.row)">编辑文章</el-button>
              <el-button slot="reference" size="mini" type="danger" @click="deleteNewsInfo(scope.$index, scope.row)">
                删除文章</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="block">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tableData.currentPage" :page-sizes="[5, 10, 15, 20,25,30,35,40]"
          :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </el-card>
    <el-footer>
    </el-footer>



  </el-container>


</template>
<script>
  import {
    getnewsInfoApi,
    deleteNewsInfoApi,
    selectLikeApi
  } from "@/api/newsInfoApi";
  export default {
    data() {
      return {
        tableData: {
          //表格数据
          data: [{
            id: "",
            name: "",
            createTime: "",
            releaseAccount: "",
            updateTime: "",
            state: "",
            articleType: "",
            content: ""
          }],
          currentPage: 1,
          pageSize: 5,
          total: 0
        },
        formData: {
          id: "",
          name: "",
          createTime: "",
          releaseAccount: "",
          updateTime: "",
          state: "1",
          articleType: "",
          content: "",
          startTime: "",
          endTime: ""
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created: function () {
      this.getNewsInfo();

    },
    methods: {
      changePageSize(val) {
        this.tableData.pageSize = val;
        this.getNewsInfo();
      },
      changeCurrentPage(val) {
        this.tableData.currentPage = val;
        this.getNewsInfo();
      },
      prevPage(val) {
        this.tableData.currentPage = val;
        this.getNewsInfo();
      },
      nextPage(val) {
        this.tableData.currentPage = val;
        this.getNewsInfo();
      },
      //格式化时间
      timeFormart(row) {
        var date = new Date(row.createTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y + M + D + " " + h + m + s;
      },
      //显示状态
      stateFormart(row) {
        if (row.state == 1) {
          return "显示"
        } else if (row.state == 0) {
          return "未显示"
        }
      },
      //文章类型
      articleTypeFormart(row) {
        if (row.articleType == 1) {
          return "新闻动态展示"
        } else if (row.articleType == 2) {
          return "政策法规"
        } else if (row.articleType == 3) {
          return "通知通告"
        }
      },
      //获取所有数据
      getNewsInfo() {
        getnewsInfoApi(this.tableData).then(res => {
          this.tableData.data = res.data.data.items;
          this.tableData.total = res.data.data.total;
        })
      },
      //打开新增文章
      openAticleDialog() {
        this.$router.push({
          path: "/aticle"
        });
      },
      //删除文章
      deleteNewsInfo(index, row) {
        //根据id删除
        this.$confirm("是否将永久删除此文章?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          deleteNewsInfoApi(row.id).then(res => {
            this.$message.success(res.data.respondMessage);
            this.getNewsInfo();
          }).catch(() => {
            this.$message({
              showClose: true,
              message: "已取消删除！",
              type: "erro",
            });
          })
        }).catch(() => {
          this.$message({
            showClose: true,
            message: "已取消删除！",
            type: "info",
          });
        })
      },
      editNewsInfo(index, row) {
        this.$router.push({
          path: "/aticle",
          query: row
        });
      },
      //时间选择器
      selectLikeTime(val) {
        for (let i = 0; i < val.length; i++) {
          this.formData.startTime = val[0];
          this.formData.endTime = val[1];
        }
      },
      //模糊查询
      submitForm(formData) {
        this.$refs[formData].validate(valid => {
          if (valid) {
            selectLikeApi(this.formData)
              .then(response => {
                this.tableData.data = response.data.data.items;
                this.tableData.total = response.data.data.total;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success"
                });
                //this.resetForm(formData);
              })
              .catch(error => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error"
                });
              });
          } else {
            return false;
          }
        });
      },
      // 清空表单选项
      resetForm(formData) {
        this.$refs[formData].resetFields();
        this.getNewsInfo();
      }
    }
  }
</script>
<style>
  .article .el-form--inline .el-form-item__label {
    width: 200px;
  }

  .article .el-form--inline .el-form-item__label {
    font-size: 18px;
  }
</style>